/**
 * Created by maiseries on 2018/1/4.
 */
import React from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
    Modal,
    ScrollView,
    Platform,
    Linking
} from 'react-native';

let self = null;

export default class BottomPopupModal extends React.Component {

    static propTypes = {
        visible: React.PropTypes.bool,
        cancel: React.PropTypes.func
    }

    static defaultProps = {
        visible: false,
    }


    constructor(prop) {
        super(prop);
        this.state = {};
        self = this;
    }

    skip() {
        if(Platform.OS === 'ios'){
            Linking.openURL(global.config.update.url);
        }else {
            Linking.openURL(global.config.update.url);
        }
    }

    render() {
        const updateConfig = global.config;
        if(updateConfig.update){
            return (
                <Modal onRequestClose={()=>{}} animationType={'fade'} transparent={true} visible={this.props.visible}>
                    <View style={[base.clientWH, base.rowCC, styles.bg]}>
                        <View style={[base.columnCC, styles.container, this.props.style]}>
                            <View style={styles.topBox}>
                                <Text allowFontScaling={false} style={styles.title}>有新版本更新</Text>
                            </View>
                            <ScrollView style={styles.midBox}>
                                <View style={styles.row}>
                                    <Text allowFontScaling={false} style={styles.key}>版本:</Text>
                                    <Text allowFontScaling={false} style={styles.value}>{updateConfig.update.version}</Text>
                                </View>
                                <View style={styles.row}>
                                    <Text allowFontScaling={false} style={styles.key}>大小:</Text>
                                    <Text allowFontScaling={false} style={styles.value}>{updateConfig.update.size}</Text>
                                </View>
                                <View style={styles.row}>
                                    <Text allowFontScaling={false} style={styles.key}>内容:</Text>
                                    <Text allowFontScaling={false} style={styles.value}>{updateConfig.update.content}</Text>
                                </View>
                            </ScrollView>
                            <View style={[base.rowCC, styles.bottomBox]}>
                                <TouchableOpacity style={{flex: 1}} onPress={()=>this.props.cancel ? this.props.cancel():{}} activeOpacity={layout.TOUCH_OPACITY_ACTIVE}>
                                    <View style={[base.rowCC, styles.cancelBox]}>
                                        <Text allowFontScaling={false} style={styles.cancelText}>稍后提醒</Text>
                                    </View>
                                </TouchableOpacity>
                                <TouchableOpacity style={{flex: 1}} onPress={()=>this.skip()} activeOpacity={layout.TOUCH_OPACITY_ACTIVE}>
                                    <View style={[base.rowCC, styles.confirmBox]}>
                                        <Text allowFontScaling={false} style={styles.confirmText}>立即更新</Text>
                                    </View>
                                </TouchableOpacity>
                            </View>
                        </View>
                    </View>
                </Modal>
            )
        }else {
            return (<View/>)
        }
    }
}

const styles = StyleSheet.create({
    bg: {
        backgroundColor: 'rgba(0,0,0,0.4)'
    },
    container: {
        width: layout.width(550),
        height: layout.height(600),
        backgroundColor: '#fff',
        borderRadius: layout.width(20)
    },
    topBox: {
        padding: layout.GAP_HORIZONTAL_LARGE
    },
    title: {
        fontSize: layout.font(36),
        color: layout.MAIN_AUX_COLOR
    },
    midBox: {
        flex: 1,
        alignSelf: 'stretch',
        paddingHorizontal: layout.GAP_HORIZONTAL_LARGE * 2,
    },
    row: {
        flexDirection: 'row',
    },
    key: {
        paddingRight: layout.width(12),
        fontSize: layout.font(28),
        lineHeight: layout.heightToFixed(40),
        color: layout.MAIN_AUX_COLOR
    },
    value: {
        flex: 1,
        fontSize: layout.font(28),
        lineHeight: layout.heightToFixed(40),
        color: layout.FORM_FONT_COLOR
    },
    bottomBox: {
        alignSelf: 'stretch',
        height: layout.height(88),
        paddingVertical: layout.GAP_VERTICAL_SMALL,
        borderTopWidth: layout.LINE_WIDTH,
        borderTopColor: layout.MAIN_COLOR
    },
    cancelBox: {
        flex: 1,
        alignSelf: 'stretch',
        height: layout.height(60)
    },
    cancelText: {
        fontSize: layout.font(32),
        color: layout.FORM_AUX_FONT_COLOR
    },
    confirmBox: {
        flex: 1,
        alignSelf: 'stretch',
        borderLeftColor: layout.MAIN_COLOR,
        borderLeftWidth: layout.LINE_WIDTH,
    },
    confirmText: {
        fontSize: layout.font(32),
        color: layout.MAIN_COLOR
    },
})